<template>
	<view>
		<u-navbar
			title="订单详情"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<template v-if="loading">
				<view style="padding: 32rpx;">
					<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="7" v-for="i in 8" :key="i"></u-skeleton>
				</view>
			</template>
			<template v-else>
				<view class="shop-order-detail-t" :style="{backgroundColor: appColor}">
					<text class="shop-order-detail-t1">{{detail.orderStatus_dictText}}</text>
				</view>
				<view class="shop-order-detail-t-1">
					<view @click="logistics(detail)" class="shop-order-detail-t-1-box u-border-bottom" v-if="Number(detail.orderStatus)>=3 && isLogistics">
						<view class="shop-order-detail-t-1-l">
							<text style="font-size: 56rpx;color: #666;" class="iconfont icon-peisong2"></text>
						</view>
						<view class="shop-order-detail-t-1-m">
							<view class="shop-order-detail-t-1-m-1 u-line-2">{{logisticsInfo.acceptStation}}</view>
							<view class="shop-order-detail-t-1-m-2">{{logisticsInfo.acceptTime}}</view>
						</view>
						<view class="shop-order-detail-t-1-r" style="text-align: right;">
							<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>
					<view class="shop-order-detail-t-1-box">
						<view class="shop-order-detail-t-1-l">
							<text style="font-size: 56rpx;color: #666;" class="iconfont icon-shouhuodizhi"></text>
						</view>
						<view class="shop-order-detail-t-1-m">
							<view class="shop-order-detail-t-1-m-1 u-line-2">{{detail.nickName}} {{detail.phone}}</view>
							<view class="shop-order-detail-t-1-m-2">{{detail.address}}</view>
						</view>
						<view class="shop-order-detail-t-1-r" style="text-align: right;">
							<!-- <text class="iconfont icon-youjiantou"></text> -->
						</view>
					</view>
				</view>
				<view class="shop-order-item">
					<view class="shop-order-item-t">
						<view class="shop-order-item-t-l">
							<u--image radius="8rpx" mode="aspectFill" :src="appInfo.logo[0].url" width="38rpx" height="34rpx"></u--image>
							<view style="width: 16rpx;"/>
							<view class="shop-order-item-t-l-1 u-line-1">{{appInfo.name}}</view>
						</view>
						<view class="shop-order-item-t-r">
							<text>共计1件商品</text>
						</view>
					</view>
					<view class="shop-order-item-m">
						<u--image class="shop-order-item-m-l" radius="16rpx" mode="aspectFill" :src="detail.image[0].url" width="160rpx" height="160rpx"></u--image>
						<view class="shop-order-item-m-m">
							<view class="u-line-2">{{detail.goodsName}}</view>
							<view class="shop-order-item-m-m1">
								<text v-if="detail.payPrice>0" style="color: #f40215;font-size: 28rpx;">{{detail.score}}积分+{{detail.payPrice}}元</text>
								<text v-else style="color: #f40215;font-size: 28rpx;">{{detail.score}}积分</text>
								<text>x{{detail.buyCount}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="shop-order-item-bb u-border-bottom">
					<view class="shop-order-item-bb-item">
						<view class="shop-order-item-bb-item-l">订单编号:</view>
						<view class="shop-order-item-bb-item-r">{{detail.id}}</view>
					</view>
					<view class="shop-order-item-bb-item">
						<view class="shop-order-item-bb-item-l">下单时间:</view>
						<view class="shop-order-item-bb-item-r">{{detail.createTime}}</view>
					</view>
					<view class="shop-order-item-bb-item" v-if="detail.payMethod_dictText">
						<view class="shop-order-item-bb-item-l">支付方式:</view>
						<view class="shop-order-item-bb-item-r">{{detail.payMethod_dictText || ''}}</view>
					</view>
					<view class="shop-order-item-bb-item">
						<view class="shop-order-item-bb-item-l">支付时间:</view>
						<view class="shop-order-item-bb-item-r">{{detail.payTime || '无'}}</view>
					</view>
				</view>
				<view class="shop-order-item-bb">
					<view class="shop-order-item-bb-item">
						<view class="shop-order-item-bb-item-l">商品总额:</view>
						<view class="shop-order-item-bb-item-r" v-if="detail.payPrice>0" style="color: #f40215;flex: 1;text-align: right;">{{detail.score}}积分+{{detail.payPrice}}元</view>
						<view class="shop-order-item-bb-item-r" v-else style="color: #f40215;flex: 1;text-align: right;">{{detail.score}}积分</view>
					</view>
					<view class="shop-order-item-bb-item">
						<view class="shop-order-item-bb-item-l">运费:</view>
						<view class="shop-order-item-bb-item-r" style="color: #f40215;flex: 1;text-align: right;">免运费</view>
					</view>
					<view class="shop-order-item-bb-item" v-if="detail.payPrice>0">
						<view class="shop-order-item-bb-item-l"></view>
						<view class="shop-order-item-bb-item-r" style="flex: 1;text-align: right;">
							<text style="padding-right: 16rpx;font-size: 28rpx;color: #333;font-weight: bold;">实付金额: </text>
							<text style="color: #f40215;font-size: 28rpx;">&yen; {{detail.payPrice}}</text>
						</view>
					</view>
				</view>
				<view style="height: 32rpx;"/>
			</template>
		</scroll-view>
		<view class="good-detail-bootom" v-if="!loading && detail.orderStatus === '3'">
			<view style="margin: 0 32rpx;height: 100%;width: calc(100vw - 64rpx);display: flex;align-items: center;justify-content: flex-end;">
				<view class="good-detail-bootom-r">
					<u-button @click="completeOrder(detail)" :color="appColor" text="确认收货" shape="circle"></u-button>
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	import {goodsScoreOrderComplete, goodsScoreOrderById, goodsScoreOrderGetLogistics} from '@/api/me.js';
	import {getOrderCount} from '@/api/me.js';
	export default {
		data() {
			return {
				detail: {},
				loading: true,
				logisticsInfo: {},
				isAfterSale: false,
				isLogistics: false,
			}
		},
		computed: {
			...mapState(['appInfo']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				if(this.detail.orderStatus === '3') {
					return this.scrollHeight - 44 - 50 + 'px';
				}
				return this.scrollHeight - 44 + 'px';
			}
		},
		onLoad({id, status}) {
			this.loading = true;
			goodsScoreOrderById({id}).then(res => {
				this.detail = res.result;
				this.isAfterSale = res.result.orderStatus === '-1';
				if(Number(res.result.orderStatus)>=3) {
					goodsScoreOrderGetLogistics({id}).then(res => {
						this.logisticsInfo = res.result.traces.pop();
						if(res.result.traces.length === 0) {
							this.isLogistics = false;
						} else {
							this.isLogistics = true;
						}
					});
				}
			}).finally(() => {
				setTimeout(() => {
					this.loading = false;
				}, 300)
			})
		},
		methods: {
			...mapActions(['setOrderCount']),
			toBuy() {
				let url = `/pages/me/shopCart`;
				this.$cuNavigateTo(url);
			},
			// 获取数量
			getOrderCount() {
				getOrderCount().then(res => {
					this.setOrderCount({orderCount: res.result});
				})
			},
			// 确认收货
			completeOrder({id}) {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '确认收货?',
					confirmColor: that.appColor,
					success: function (res) {
						if (res.confirm) {
							goodsScoreOrderComplete({id}).then(res => {
								that.$cuTip('订单完成');
								uni.navigateBack({
									delta: 1
								})
							})
						}
					}
				})
			},
			// 物流详情
			logistics({id}) {
				let url = `/pages/me/logisticsPoints?id=${id}`;
				this.$cuNavigateTo(url);
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);     /*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);  /*兼容 iOS>11.2*/
		box-sizing: content-box;
		.good-detail-bootom-r {
			width: 260rpx;
			margin-left: 16rpx;
		}
	}
	
	.shop-order-detail-t {
		height: 180rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.shop-order-detail-t1 {
			font-size: 44rpx;
			color: #fff;
		}
		.shop-order-detail-t2 {
			font-size: 28rpx;
			color: #fff;
		}
	}
	
	.shop-order-detail-t-1 {
		margin: 16rpx 0;
		.shop-order-detail-t-1-box {
			padding: 16rpx 32rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			.shop-order-detail-t-1-l {
				width: 88rpx;
			}
			.shop-order-detail-t-1-m {
				width: calc(100% - 144rpx);
				.shop-order-detail-t-1-m-1 {
					font-size: 28rpx;
					color: #333;
				}
				.shop-order-detail-t-1-m-2 {
					margin-top: 8rpx;
					font-size: 24rpx;
					color: #999;
				}
			}
			.shop-order-detail-t-1-r {
				width: 56rpx;
				color: #999;
				font-size: 32rpx;
			}
		}
	}
	.shop-order-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 16rpx;
		.shop-order-item-t {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.shop-order-item-t-l {
				display: flex;
				align-items: center;
				width: calc(100% - 200rpx);
				.shop-order-item-t-l-1 {
					color: #000;
					line-height: 30rpx;
					font-size: 30rpx;
				}
			}
			.shop-order-item-t-r {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				line-height: 28rpx;
				color: #666;
			}
		}
		.shop-order-item-m {
			margin-top: 32rpx;
			height: 160rpx;
			display: flex;
			align-items: center;
			.shop-order-item-m-m {
				width: calc(100% - 160rpx);
				font-size: 28rpx;
				color: #333;
				padding-left: 16rpx;
				box-sizing: border-box;
				.shop-order-item-m-m1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
	
	.shop-order-item-bb {
		padding: 16rpx 32rpx;
		background-color: #fff;
		.shop-order-item-bb-item {
			display: flex;
			align-items: center;
			height: 56rpx;
			justify-content: space-between;
			.shop-order-item-bb-item-l {
				width: 120rpx;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #666;
			}
			.shop-order-item-bb-item-r {
				flex: 1;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #000;
			}
		}
	}
</style>